<template>
  <div>
    <!-- 一个组件绑定很多内容的时候，顺序为：
    先指令，eg. v-model等
    再属性，最后是方法 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
     <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="50"
        :immediate-check="false"
        @load="onLoad"
    >
    <!-- 文章列表 -->
    <article-item v-for="(item,index) in ArticleList" :key="item.art_id+index" :obj="item" @click.native="$router.push(`/article_detail?aid=${item.art_id}`)"></article-item>
    <!-- <article-item></article-item> -->
    <!-- <article-item></article-item> -->
    </van-list>
  </van-pull-refresh>

  </div>
</template>

<script>
import { ArticleListAPI } from '@/api'
import ArticleItem from './components/ArticleItem.vue'
import { timeAgo } from '@/utils/date.js'
export default {
  components: {
    ArticleItem
  },
  created () {
    this.getArticleList()
  },
  data () {
    return {
      ArticleList: [],
      finished: false,
      loading: false,
      nextTime: null,
      refreshing: false
    }
  },
  methods: {
    timeAgo,
    onLoad () {
      console.log('触发底部加载')

      this.getArticleList()
    },
    async getArticleList () {
      const res = await ArticleListAPI({ channelId: this.cid, timestamp: this.nextTime })
      res.data.data.results.forEach(obj => {
        obj.pubdate = this.timeAgo(obj.pubdate)
      })
      if (res.data.data.results.length === 0) {
        this.finished = true // 没数据了，让它不要再加载了
      } else {
        this.nextTime = res.data.data.results.pre_timestamp // 不断获得新的时间戳
        this.ArticleList = [...this.ArticleList, ...res.data.data.results] // 拿原本数组里的数据跟新请求的拼接在一起
        this.loading = false // 设为false，不要再在加载了
      }
    },
    onRefresh () {
      this.nextTime = null
      this.ArticleList = []
      this.getArticleList()
      this.loading = false
      this.refreshing = false
    }
  },
  props: {
    cid: Number
  }
}
</script>
